{% extends 'base.html' %}

{% block title %}User Login{% endblock %}

{% block style %}
<style>
    body {
        background-image: url('/static/bg-animation/1.jpeg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-attachment: fixed !important;
    }
</style>
{% endblock %}

{% block content %}

<div class="login-container">
<h2>Login</h2>
{% with messages = get_flashed_messages(with_categories=True) %}
            {% if messages %}
                <div class="flash-messages">
                    {% for category, message in messages %}
                        <div class="flash flash-{{ category }}">{{ message }}</div>
                    {% endfor %}
                </div>
    {% endif %}
{% endwith %}
<form action="{{ url_for('login') }}" method="POST">
    <input type="text" name="username" placeholder="Username" required><br>
    <input type="password" name="password" placeholder="Password" required><br>
    <button type="submit">Login</button>
    </form>

    <p>No account? <a href="{{ url_for('register') }}">Register now</a></p>
</div>
{% endblock %}